<template>
  <div class="home">
    <div class="home_page"
      v-infinite-scroll="getMore" 
      infinite-scroll-distance="10"
      title-active-color="#FF531A"
      title-inactive-color="#333"
      infinite-scroll-immediate-check="false">
      <van-tabs sticky v-model="active" @click="toggleTab">
        <van-tab v-for="(item, index) in Sections" :key="index" :title="item.catName">
          <div class="ul-wrap">
            <div class="li" v-for="(item, index) in productData" :key="index" @click="todetail(item)">
              <van-image
                class="product-img"
                fit="cover"
                :src="item.narrowPicUrl"
              />
              <!-- <img :src="item.narrowPicUrl" class="product-img"> -->
              <div class="bottom">
                <div class="left">
                  <div class="title">{{item.itemTitle}}</div>
                  <div class="number">
                    <span class="price">¥{{item.price || 0}}</span>
                    <span class="count">库存:{{item.stockNum}}</span>
                  </div>
                </div>
               <!-- <img class="right" src="../../assets/images/add.png">-->
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    
  </div>
</template>
<script>
import Vue from 'vue';
import { Tab, Tabs, Image as VanImage, Lazyload } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(VanImage)
import "../../assets/style/index.css";
import {findItemCat, findChildItemCatByNo } from "../../api/page.js";

export default {
  name: "home",
  data: function() {
    return {
      active: 0,
      page: 1,
      Sections: [],
      loading: false,
      icon:require("../../assets/images/laba.png"),
      productData: []
    };
  },
  async created() {
    await findItemCat("S0001").then(response => {
      this.Sections = response.data;
    });
    findChildItemCatByNo({catNo : this.Sections[0].catNo}).then(response => {
      this.productData = response.data;
    });
  },
  methods: {
    toggleTab(index) {
      const catNo = this.Sections[index].catNo
        findChildItemCatByNo({catNo : catNo}).then(response => {
          this.productData = response.data;
        });
    },
    todetail(item) {
      this.$router.push("/detail?itemNo=" + item.itemNo)
    },
    getMore() {
      console.log("////")
			if (this.loading) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        });
      }
    },
  }
};
</script>
<style scoped lang="less">
/deep/ .van-tabs__line {
  height: 0.106667rem;
  border-radius: 0.053333rem;
  background: #FF561D;
}
.home_page{
  padding: 0 0.4rem;
}
.ul-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.533333rem 0 1.6rem 0;
  .li {
    margin-bottom: 0.533333rem;
    .product-img {
      width: 4.453333rem;
      height: 4.453333rem;
      border-radius: 0.266667rem
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.133333rem;
      .left {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .title {
          color: #333333;
          font-size: 0.373333rem;
          font-weight: bold;
          margin: 0.266667rem 0;
        }
        .number {
          display: flex;
          align-items: center;
          width: 3.466667rem;
          justify-content: space-between;
          .price {
            color: #FF531A;
            font-size: 0.48rem;
            font-weight: bold;
          }
          .count {
            color: rgba(51, 51, 51, .6);
            font-size: 0.32rem;
          }
        }
      }
      .right {
        width: 0.72rem;
        height: 0.72rem;
      }
    }
  }
}

</style>
